<template>
    <div class="docker">
      <div 
           v-for="(item, index) in dockerList" 
           :class="{'docker-item':true, 'docker-item-active': index === 0}"
           :key="item.icon"
       >
        <div class="iconfont" :class="item.icon"></div>
        <div class="docker-title">{{ item.text }}</div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'Docker',
  setup() {
    const dockerList = [
      { icon: 'icon-cc-home', text: '首页' },
      { icon: 'icon-gouwuche', text: '购物车' },
      { icon: 'icon-dingdan', text: '订单' },
      { icon: 'icon-wode', text: '我的' }
    ];
    return { dockerList }
  }
}
</script>

<style lang="scss" scoped>
@import '../../style/viriables.scss';
.docker{
  display: flex;
  position: absolute;
  left:0;
  bottom: 0;
  width: 100%;
  height: .49rem;
  box-sizing: border-box;
  border:0.01rem solid $content-bgColor;
  &-item{
    flex:1;
    color: $content-fontcolor;
    text-align: center;
    .iconfont{
      margin: 0.07rem 0 0.02rem 0;
      font-size:.18rem;
    }
    &-active{
      color: #1fa4fc;
    }
  }
  &-title{
    font-size:.2rem;
    transform: scale(.5,.5);
    transform-origin: center top;
  }
}
</style>
